CSS-Backgrounds

    In CSS, we have many effects associated with the background property, and here in this article, we will be discussing all the essential background properties. The background properties provide the background effect to the elements.

    CSS Background Properties

    Background Property: Description:
    background-color It describes the background colour for an element.
    background-image It can set an image as a background for an element.
    background-repeat It describes the repetition of an image in the background.
    background-position It defines the position of the image at the background.
    background-attachment It defines whether the background image will scroll or fix.

    Background Color

    The background-color property of CSS is used to set the background colour of an element.

    Example: 

    <!DOCTYPE html>
<html>
<head>
  <title></title>

  <style type="text/css">
    p {
      /*setting the background color*/
      background-color : green;
    }
  </style>

</head>
<body>
  <p>Welcome To TechGeekbuzz</p>
</body>
</html>

    Output 

    Welcome To TechGeekbuzz

    Note:

    To set a background colour for the complete webpage define the background-color property for the <body> element.

    Background Image

    Similar to the colour we can use an image as a background for our webpage. To set a background image for an element or complete we page we can use the background-image property.

    Example: 

    <!DOCTYPE html>
<html>
<head>
<title></title>

  <style type="text/css">
    body {
      /*setting the background image for webpage*/
      background-image: url("img.png");
    }
  </style>

</head>
<body>
<p>Welcome To TechGeekbuzz</p>
</body>
</html> 

    NOTE: For the background-image, we use the URL() function to specify the image location.

    Repeat the Background

    By default, the background image will repeat itself if it does not fit the element, else it will be stretch to a single image. If we use an image as a background and the image has high resolution then the browser stretches the image and set it as a background for an element accordingly. But if the resolution of the image is low the browser will repeat the image to fill the complete background image. But using the background-repeat property we can control whether to repeat the image or not.

    Example 

    <!DOCTYPE html>
<html>
<head>

<title></title>

<style type="text/css">
    body {
      /*setting the background image*/
      background-image: url("img.png");     
      /*repeat the image in the background*/
      background-repeat: repeat; 
    }
  </style>

</head>
<body>
<p>Welcome To TechGeekbuzz</p>
</body>
</html>

    Note: background-repeat values:

    • no-repeat: It will not repeat the image.
    • repeat-y: It will repeat the background image vertically
    • repeat-x: It will repeat the background image horizontally.

    Set the Position of the background Image:

    The background-position property can shift the background image toward right and down.

    Example: 

    <!DOCTYPE html>
<html>
<head>
<title></title>

<style type="text/css">
    body {
      /*setting the background image*/
      background-image: url("img.png");
      /*shift the image 100px right from left*/
      /*shift the image 200px down from the top*/
      background-position: 100px 200px;
    }
  </style>

</head>
<body>
<p>Welcome To TechGeekbuzz</p>
</body>
</html>

    Attach the background (fixed or scroll):

    The background-attachment property describes whether a background image would be fixed or scroll with its element content.

    Example: 

    <!DOCTYPE html>
<html>
<head>
<title></title>
  <style type="text/css">
    body {
      /*setting the background image*/
      background-image: url("img.png");
      background-attachment: fixed;
    }
  </style>
</head>
<body>
<p>Only the content is scrolled the image will be fixed </p>
</body>
</html>

    background-attachment Scroll: 

    <!DOCTYPE html>
<html>
<head>
<title></title>

  <style type="text/css">
    body {
      /*setting the background image*/
      background-image: url("img.png");
      background-attachment: scroll;
    }
  </style>

</head>
<body>
<p>Both content and image will scroll</p>
</body>
</html>

    Summary

    • There are various properties associated with the CSS background.
    • The background properties provide background effect to the element.
    • The background-color property defines the background colour for an element.
    • The background-image can set an image as a background to an HTML element.
    • The background-image use the url() function to specify the image location.
    • The background-attachment property specifies whether to fix the background image or make it scrollable with content.
    Previous Tutorial Next Tutorial